import { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, Layout } from 'antd';
import 'dayjs/locale/zh-cn';
import { Switch, Router, Route, Redirect } from 'react-router-dom';
import { createHashHistory } from 'history';
import Home from '@pages/home/index';
import HaloHeader from '@components/header/index';
import HaloFooter from '@components/footer/index';
import routeConfig from '@routeConfig';
import './styles/index.less';

const { Content } = Layout;
const history = createHashHistory();

const APP = () => {
    return (
        <ConfigProvider>
            <Router history={history}>
                <Layout className="home-layout">
                    <HaloHeader />
                    <Content>
                        <Suspense fallback="  ">
                            <Switch>
                                {routeConfig}
                                <Redirect from="/*" to="/index" />
                                <Route path="/index" exact component={Home} />
                            </Switch>
                        </Suspense>
                    </Content>
                    <HaloFooter />
                </Layout>
            </Router>
        </ConfigProvider>
    );
};

ReactDOM.render(<APP />, document.getElementById('root'));
